<template lang="pug">
.view.cp-product
  el-tabs.pt-tabs(v-model="activeName")
    el-tab-pane(v-for="(pane, index) in paneList", :label="pane.value", :name="pane.name", :key="index")
  .fix-flex-pos.pt-main
    keep-alive
      router-view
</template>

<script>
import { mapGetters } from 'vuex';
import { hasPermission } from '@/utils';
import ComApi from '@/api/common';

export default {
  name: 'product',
  data() {
    return {
      panes: []
    };
  },
  computed: {
    paneList () {
      return this.panes.filter(pane => hasPermission(this.roles, pane));
    },
    activeName: {
      set (name) {
        this.$router.push({ name: `pro${name}` });
      },
      get () {
        return `${this.$route.path.split('/')[2]}`;
      }
    },
    ...mapGetters(['roles'])
  },
  beforeRouteEnter (to, from, next) {
    ComApi.getRoutes({ name: 'product' }).then((result) => {
      next((vm) => {
        vm.panes = result.obj;
      });
    }).catch(() => {
      next();
    });
  },
  // 监听路由变化 显示满足权限的路由
  beforeRouteUpdate (to, from, next) {
    const activeName = to.path.split('/')[2];
    let isMatch = false;
    for (const pane of this.paneList) {
      if (activeName === pane.name) {
        isMatch = true;
        break;
      }
    }
    if (isMatch) {
      next();
    } else {
      next({ path: '/404', replace: true });
    }
  },
  methods: {
  },
  created () {
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../styles/utils"
$TABHEIGHT: 40px
.cp-product
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .pt-tabs
    position: relative
    height: $TABHEIGHT
    background: white
    padding-left: 20px
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: white
  .pt-main
    top: $TABHEIGHT
  .el-dialog__header
    position: relative
    padding: 0
    height: 50px
    line-height: 50px
    background: $THEMECOLOR
    padding-left: 20px
  .el-dialog__title
    font-size: 17px
  .el-dialog__headerbtn
    line-height: 18px
    top: 16px
    right: 16px
  .el-dialog__body
    padding: 24px 28px
  .el-col
    white-space: nowrap
    overflow: auto
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item
    margin-bottom: 15px
</style>
